<!DOCTYPE html>
<html lang="en">

<head>
  <title>ThingJS Prefab</title>
  <meta charset="UTF-8" />
  <script src="./libs/thing.min.js"></script>
</head>

<body style="margin: 0; padding: 0">
  <div id="div3d"></div>
  <script src="./utils/PrefabUtility.js"></script>
  <script type="module">
    import { MyComponent,BPNode } from './src/index.js';

    let app = new THING.App();
    // 创建预制件根节点
    let root = new THING.Object3D();
    root.addComponent(MyComponent, 'myComponent');

    // 创建太阳节点，并设置为根节点的孩子节点
    let sun = new THING.Sphere({
      name:'sun', 
      position: [0, 0, 0],
      scale: [10,10,10]
    });
    sun.style.image = './assets/images/sun.jpg';
    sun.style.effect.glow = 0.5;
    sun.addComponent(MyComponent, 'myComponent', {
      speed: 2.5 
    });
    root.add(sun);
    
    // 创建地球节点，并设置为太阳节点的孩子节点
    let earth = new THING.Sphere({
      name:'earth', 
      position: [15, 0, 0],
    });
    earth.style.image = './assets/images/earth.jpg';
    earth.addComponent(MyComponent, 'myComponent', { 
      speed: 50,
    });
    sun.add(earth);

    // 创建月亮节点，并设置为地球节点的孩子节点
    let moon = new THING.Sphere({
      name:'moon',
      position: [16.5, 0, 0], 
      scale: [0.25,0.25,0.25]
    });
    moon.style.image = './assets/images/moon.jpg';
    earth.add(moon);

    // 设置相机位置和观察方向，获得合适的观察视野
    app.camera.position = [-4.14, 12.00, 23.61];
    app.camera.lookAt(sun.position);

    // 保存预制件资产
    PrefabUtility.savePrefabAsset(root, {});
  </script>
</body>

</html>